<template>
  <div>
    <BasicTable @register="registerTable">
      <template #toolbar v-if="hasPermission(['role_add'])">
        <a-button type="primary" @click="handleCreate"> 新增角色</a-button>
      </template>
      <template #action="{ record }">
        <TableAction
            :actions="[
              {
                icon: 'clarity:refresh-line',
                tooltip: '刷新角色信息',
                onClick: handleRefresh,
              },
              {
                icon: 'clarity:note-edit-line',
                onClick: handleEdit.bind(null, record),
                ifShow: () => hasPermission(['role_update']),
              },

              {
                icon: 'ant-design:delete-outlined',
                color: 'error',
                popConfirm: {
                  title: '是否确认删除',
                  placement: 'left',
                  confirm: handleDelete.bind(null, record),
                },
                ifShow: () => hasPermission(['role_delete']),
              },
            ]"
        />
      </template>
    </BasicTable>
    <RoleDrawer @register="registerDrawer" @success="handleSuccess" />
  </div>
</template>
<script lang="ts">
import {defineComponent} from 'vue';

import {BasicTable, useTable, TableAction} from '/@/components/Table';
import {deleteRole, getRoleListByPage} from '/@/api/system/role';

import {useDrawer} from '/@/components/Drawer';
import RoleDrawer from './RoleDrawer.vue';

import {columns, searchFormSchema} from './role.data';

import {usePermission} from '/@/hooks/web/usePermission';
import {useMessage} from "/@/hooks/web/useMessage";

export default defineComponent({
  name: 'RoleManagement',
  components: {BasicTable, RoleDrawer, TableAction},
  setup() {
    const {createMessage} = useMessage();
    const {hasPermission} = usePermission();
    const [registerDrawer, {openDrawer}] = useDrawer();
    const [registerTable, {reload, setLoading}] = useTable({
      title: '角色列表',
      api: getRoleListByPage,
      columns,
      formConfig: {
        labelWidth: 120,
        schemas: searchFormSchema,
        fieldMapToTime: [
          ['createTime', ['createTimeStart', 'createTimeEnd'], 'YYYY-MM-DD HH:mm:ss'],
        ],
      },
      showTableSetting: true,
      tableSetting: {
        redo: true,
        size: true,
        setting: true,
        fullScreen: true,
      },
      useSearchForm: true,
      bordered: true,
      showIndexColumn: false,
      canResize: false,
      actionColumn: {
        width: 150,
        title: '操作',
        dataIndex: 'action',
        slots: {customRender: 'action'},
        fixed: undefined,
      },
    });

    function handleRefresh() {
      setLoading(true)
      setTimeout(() => {
        setLoading(false)
      }, 1000)
    }

    function handleCreate() {
      openDrawer(true, {
        isUpdate: false,
      });
    }

    function handleEdit(record: Recordable) {
      openDrawer(true, {
        record,
        isUpdate: true,
      });
    }

    async function handleDelete(record: Recordable) {
      // deleteRole(record.id).then(() => {
      //   createMessage.success(`已成功删除角色`)
      // }).catch(() => {
      //   createMessage.error('删除角色失败')
      // })
      await deleteRole(record.id)
      reload();
    }

    function handleSuccess() {
      reload();
      createMessage.success(`操作成功`)
    }

    return {
      hasPermission,
      registerTable,
      registerDrawer,
      handleRefresh,
      handleCreate,
      handleEdit,
      handleDelete,
      handleSuccess,
    };
  },
});
</script>
